<template>
  <div class="card">
    <ul>
      <li v-for="(val,index) in list" :key="index" @click="skipList(val._id)">
        <img :src="`http://localhost:3000${val.imgUrl}`" alt />
        <p>{{val.applyTime|parseTime}}</p>
        <h4>{{val.title}}</h4>
      </li>
    </ul>
  </div>
</template>

<script>
import { skip } from "ulit/skipRouter";
export default {
  name: "card",
  props: ["list"],
  methods: {
    skipList(id) {
      skip(this, "details", { id });
    },
  },
};
</script>

<style lang="less" scoped>
.card {
  width: 100%;
  box-sizing: border-box;
  padding: 1rem;
  ul {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    list-style: none;
    li {
      width: 46%;
      margin-top: 0.5rem;
      img {
        width: 100%;
        height: 6rem;
      }
      p {
        color: #636363;
      }
      h4 {
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>